<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>绑定手机</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="我的">
    <meta name="description" content="我的">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script> -->
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox mypage" id="app">
    <div class="login">
        <div class="logo"><img src="images/logo.png" alt=""></div>
        <div class="content">
            <div class="input"><input v-model="mobile" type="text" placeholder="请输入手机号"></div>
            <div class="input code"><input v-model="verify" type="text" placeholder="请输入验证码">
                <div class="getcode" @click="getVerify"><span v-if="isgeted==false">获取验证码</span><span
                        style="color: #646464;" v-else>{{getTime}}秒</span></div>
            </div>
            <div class="btn" @click="bind">绑 定</div>
        </div>
    </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        mobile: '',
        verify: '',
        isgeted: false,
        getTime: 60,
        getTimefun: null,
        allowclick: true,
      }
    },
    mounted() {;
    },
    methods: {
      getVerify: function () {
        var that = this;
        var mobile = that.mobile;
        var checkmobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
        if (that.isgeted == false) {
          layer.closeAll();
          if (!mobile) {
            layer.msg('请填写手机号');
            return false;
          } else if (!checkmobile.test(mobile)) {
            layer.msg('您填写的手机号有误，请重新填写');
            return false;
          }
          that.isgeted = true;
          clearInterval(that.getTimefun);
          var time = 60;
          that.getTime = time;
          that.getTimefun = setInterval(() => {
            time--;
            that.getTime = time;
            if (time == 0) {
              that.isgeted = false;
              clearInterval(that.getTimefun);
            }
          }, 1000)
          that.allowclick = true;
          common_post('verify_code', {
            "mobile": mobile,
          }).then(res => {
            console.log(res)
            that.setverify = res;
          })
        }
      },
      bind: function () {
        var that = this;
        var mobile = that.mobile;
        var checkmobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
        var verify = that.verify;
        layer.closeAll();
        if (!mobile) {
          layer.msg('请填写手机号');
          return false;
        } else if (!checkmobile.test(mobile)) {
          layer.msg('您填写的手机号有误，请重新填写');
        }
        if (!verify) {
          layer.msg('请填写验证码');
          return false;
        }
        client_post('bind_mobile', {
          "mobile": mobile,
          "sms_code": verify,
        }).then(res => {
          layer.msg('登录成功', {time: 2000});
          let user_info = JSON.parse(getCookie('user_info'));
          user_info.mobile = that.mobile
          setCookie('user_info', JSON.stringify(user_info), 60 * 60);
          history.back()
        })
      },
    }
  });
</script>
</html>